<template>
	<view class="container">
		<view class="title">
			<text class="name">图片</text>
			<text class="tip">(限{{ limit }}张图片，单个图片大小不超过{{ max }}M)</text>
		</view>
		<imageUpload :image="images" :limit="limit" :max="max" @onChange="imageChange" />
		<view class="btns">
			<button class="btn" type="default" @click="back">返 回</button>
			<button class="btn" type="primary" @click="submit">保 存</button>
		</view>
	</view>
</template>

<script>
import { isBlank } from '@/utils/validate';
import api from '@/api/api';
export default {
	data() {
		return {
			type: '',
			limit: 9,
			max: 10,
			image: [],
			imageData: {
				field_name: '',
				field_value: ''
			},
			images: uni.getStorageSync('image')
		};
	},
	onLoad(e) {
		this.type = e.type;
		this.image = isBlank(this.images) ? [] : this.images.split(',');
		if (e.type == 'rent') {
			this.imageData.rent_sn = e.sn;
			this.imageData.field_name = 'rent_images';
		} else if (e.type == 'owner') {
			this.imageData.owner_id = e.id;
			this.imageData.field_name = 'owner_images';
		} else if (e.type == 'billRent') {
			this.imageData.bill_id = e.id;
			this.imageData.field_name = 'bill_images';
		} else if (e.type == 'billOwner') {
			this.imageData.bill_id = e.id;
			this.imageData.field_name = 'bill_images';
		}
	},
	onUnload() {
		uni.removeStorageSync('image');
	},
	methods: {
		submit() {
			uni.showLoading({
				title: '保存中...'
			});
			this.imageData.field_value = this.image.join(',');
			if (this.type == 'rent') {
				api.rentInfo(this.imageData).then((res) => {
					this.submitBack(res);
				});
			} else if (this.type == 'owner') {
				api.ownerInfo(this.imageData).then((res) => {
					this.submitBack(res);
				});
			} else if (this.type == 'billRent') {
				api.billInfo(this.imageData).then((res) => {
					this.submitBack(res);
				});
			} else if (this.type == 'billOwner') {
				api.billOwnerInfo(this.imageData).then((res) => {
					this.submitBack(res);
				});
			}
		},
		submitBack(res) {
			if (res.data.is_success) {
				uni.hideLoading();
				uni.showToast({
					title: '保存成功'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1000);
			} else {
				uni.hideLoading();
				uni.showToast({
					title: '保存失败',
					icon: 'none'
				});
			}
		},
		back() {
			uni.navigateBack();
		},
		imageChange(e) {
			this.image = e;
		}
	}
};
</script>

<style lang="scss">
.container {
	padding: 20rpx;
	.title {
		margin-bottom: 20rpx;
		.name {
			font-size: 30rpx;
			font-weight: bold;
			margin-right: 20rpx;
		}
		.tip {
			font-size: 26rpx;
			color: $uni-secondary-color;
		}
	}
	.btns {
		margin-top: 100rpx;
		display: flex;
		justify-content: space-between;
		.btn {
			flex: 1;
			margin: 0 10rpx;
		}
	}
}
</style>
